<template>
	<view class="assignment-section">
		<view class="assignment-card">
			<view class="card-header">
				<text class="card-title">分配置业顾问</text>
			</view>
			<view class="card-content">
				<uni-forms ref="assignForm" :modelValue="assignFormData" :rules="assignRules" label-width="100">
					<uni-forms-item label="选择顾问" name="consultantId" required>
						<uni-data-select v-model="assignFormData.consultantId" :localdata="consultantOptions"
							@change="onConsultantChange" placeholder="请选择置业顾问"></uni-data-select>
					</uni-forms-item>
					<view v-if="assignFormData.consultantName" class="selected-consultant">
						<view class="consultant-info">
							<view class="avatar">
								<text class="avatar-text">{{ getAvatarText(assignFormData.consultantName) }}</text>
							</view>
							<view class="consultant-details">
								<text class="consultant-name">{{ assignFormData.consultantName }}</text>
								<text class="consultant-status" :class="{ online: selectedConsultantOnline }">
									{{ selectedConsultantOnline ? '在岗' : '离岗' }}
								</text>
							</view>
						</view>
					</view>
					
					<view class="info-row" v-if="$userInfo.role === 6">
						<text class="label">随行人数</text>
						<view class="info-flex">
							<uni-data-checkbox mode="tag" v-model="textNum"
								:localdata="numArr"></uni-data-checkbox>
						</view>
					</view>
				</uni-forms>
			</view>

			<view class="action-section" v-if="assignFormData.consultantName">
				<button class="action-btn submit-btn" @click="handleSubmit"
					:disabled="!assignFormData.consultantId || submitting">
					{{ submitting ? '处理中...' : '确认分配' }}
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 分配表单
				assignFormData: {
					consultantId: '',
					consultantName: '',
					isOnline: false
				},
				assignRules: {
					consultantId: {
						rules: [{
							required: true,
							errorMessage: '请选择置业顾问'
						}]
					}
				},
				consultantOptions: [],
				customerId: '',
				submitting: false,
				textNum:'',
				numArr: [{
					text: '1',
					value: 1
				}, {
					text: '2',
					value: 2
				}, {
					text: '3',
					value: 3
				}, {
					text: '4',
					value: 4
				}, {
					text: '5',
					value: 5
				}, {
					text: '6',
					value: 6
				}, {
					text: '7',
					value: 7
				}, {
					text: '8',
					value: 8
				}],
			}
		},

		onShow() {
			this.getOnLinePeople()
		},
		computed: {
			selectedConsultantOnline() {
				if (!this.assignFormData.consultantId || !this.consultants.length) return false;
				const consultant = this.consultants.find(c => c._id === this.assignFormData.consultantId);
				return consultant ? consultant.isOnline : false;
			},
		},
		onLoad(query) {
			let id = query.id
			this.customerId = id
			// this.getCustomer(id)
		},
		methods: {
			async getCustomer(){
				const res = await this.$cloudOBjAjax('sunny-custom', 'getCustomerById', {id:id}).then(res=>{
					this.customerId = res.id
				});
			},
			async getOnLinePeople() {
				let res = await this.$cloudOBjAjax('sunny-users', 'getConsultantList', {});
				// 前台
				if(this.$userInfo.role == 6){
					res = res.filter(item => item.isOnline === 1)
				}
				if(res.length === 0){
					uni.showModal({
						title:'提示',
						showCancel:false,
						content:"没有在线的置业顾问,请先上线置业顾问",
						success:res=>{
							if(res.confirm){
								uni.navigateBack()
							}
						}
					})
					return 
				}
				this.consultants = res;
				this.consultantOptions = res.map(item => ({
					value: item._id,
					text: item.nickName
				}));
			},
			onConsultantChange(e) {
				const selected = this.consultants.find(item => item._id === e);
				if (selected) {
					this.assignFormData = {
						consultantId: selected._id,
						consultantName: selected.nickName,
						isOnline: selected.isOnline
					}
				}

				console.log('selected', selected)
			},
			getAvatarText(name) {
				return name ? name.charAt(0) : '?';
			},
			// 提交处理
			async handleSubmit() {
				this.submitting = true;
				let postData = {
					customerId: this.customerId,
					eventType: 2,
					customerName: this.assignFormData.consultantName,
					consultantId: this.assignFormData.consultantId
				}

				const bangdGX = await this.$cloudOBjAjax('suuny-custom', 'assignConsultant', {
					customerId: this.customerId,
					consultantName: this.assignFormData.consultantName,
					consultantId: this.assignFormData.consultantId
				})

				// if(role == 6)
				// 要先登记
				if (this.$userInfo.role === 6) {
					postData.eventType = 3
					const res = await this.$cloudOBjAjax('customer-lifecycle-history', 'addFenPeiRecord', {
						...postData,
						eventType: 3, // 客户登记事件类型
						eventDescription: '客户到访签到登记',
						textNum: this.textNum,
					})
				}
				
				postData.eventType = 4
				const res2 = await this.$cloudOBjAjax('customer-lifecycle-history', 'addFenPeiRecord', postData)
				// 变成分配了置业顾问 变成了公共的池
				this.$cloudOBjAjax('suuny-custom', 'changeStatus', {
					_id: this.customerId,
					status: 2
				})
				this.submitting = false;
				
				// const res = await this.$cloudOBjAjax('customer-lifecycle-history','addFenPeiRecord',postData)
				this.$simpleToast('分配成功')

				this.$back()

			}
		}
	}
</script>

<style scoped lang="scss">
	.assignment-section {
		margin-bottom: 20rpx;
	}

	.search-card,
	.result-card,
	.registration-card,
	.assignment-card {
		background: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
	}

	.search-title {
		display: flex;
		align-items: center;
		gap: 10rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 30rpx;
	}

	.search-form {
		padding: 0 10rpx;
	}

	.search-btn {
		background: #ff6b35;
		color: #fff;
		border: none;
		border-radius: 12rpx;
		padding: 24rpx;
		font-size: 32rpx;
		font-weight: bold;
		margin-top: 20rpx;
		width: 100%;
	}

	.search-btn:disabled {
		background: #ccc;
	}

	.result-header {
		display: flex;
		align-items: center;
		gap: 15rpx;
		margin-bottom: 30rpx;
	}

	.result-title {
		font-size: 32rpx;
		font-weight: bold;
	}

	.result-card.found {
		border-left: 8rpx solid #52c41a;
	}

	.result-card.notfound {
		border-left: 8rpx solid #ff4d4f;
	}

	.customer-info {
		background: #f8f9fa;
		border-radius: 12rpx;
		padding: 20rpx;
	}

	.info-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15rpx 0;
		border-bottom: 1rpx solid #e8e8e8;
	}

	.info-row:last-child {
		border-bottom: none;
	}

	.label {
		font-size: 28rpx;
		color: #666;
		font-weight: 500;
	}

	.value {
		font-size: 28rpx;
		color: #333;
	}

	.status-tag {
		padding: 8rpx 16rpx;
		border-radius: 20rpx;
		font-size: 24rpx;
	}

	.status-registered {
		background: #e6f7ff;
		color: #1890ff;
	}

	.status-assigned {
		background: #f6ffed;
		color: #52c41a;
	}

	.status-received {
		background: #fff7e6;
		color: #fa8c16;
	}

	.status-intention {
		background: #f9f0ff;
		color: #722ed1;
	}

	.status-deal {
		background: #f6ffed;
		color: #52c41a;
	}

	.status-lost {
		background: #fff2f0;
		color: #ff4d4f;
	}

	.not-found {
		text-align: center;
		padding: 40rpx 0;
	}

	.not-found-text {
		display: block;
		font-size: 32rpx;
		color: #333;
		margin-bottom: 15rpx;
		font-weight: 500;
	}

	.not-found-desc {
		display: block;
		font-size: 28rpx;
		color: #666;
	}

	.card-header {
		margin-bottom: 30rpx;
	}

	.card-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.selected-consultant {
		margin-top: 20rpx;
		padding: 20rpx;
		background: #f8f9fa;
		border-radius: 12rpx;
	}

	.consultant-info {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background: #ff6b35;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.avatar-text {
		color: #fff;
		font-size: 32rpx;
		font-weight: bold;
	}

	.consultant-details {
		flex: 1;
	}

	.consultant-name {
		display: block;
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 5rpx;
	}

	.consultant-status {
		font-size: 24rpx;
		color: #999;
	}

	.consultant-status.online {
		color: #52c41a;
	}

	.action-section {
		display: flex;
		gap: 20rpx;
		padding: 30rpx 0;
	}

	.action-btn {
		flex: 1;
		border: none;
		border-radius: 12rpx;
		padding: 24rpx;
		font-size: 32rpx;
		font-weight: bold;
	}

	.reset-btn {
		background: #f8f9fa;
		color: #666;
		border: 2rpx solid #e9ecef;
	}

	.submit-btn {
		color: #fff;
		line-height: 80rpx;
		height: 80rpx;
		padding:0;
	}

	.submit-btn:disabled {
		background: #ccc;
		color: #999;
	}
</style>